<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
    guide
    </div>
    <div class="panel-body">
      <textarea class="form-control" v-model="profile.guide"></textarea>
    </div>
    <div class="panel-footer">
      <button class="btn btn-default" v-on:click="onUpdate">修改</button>
      <input type="checkbox" id="checkbox" v-model="profile.isHtml">
      <label for="checkbox">html编辑模式</label>
    </div>
  </div>
</div>
<script>
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';
  var vue = new Vue({
    el: '#app',
    data: {
      profile: {},
      errorMsg: '',
      successMsg: ''
    },
    methods: {
      fetchProfile: function() {
        $.post(dataPrefix + '/profile/data', {appId: appId, _csrf: $('#_csrf').val()} ,function(result) {
          if (result.error) {
            vue.errorMsg = result.error;
          } else {
            vue.profile = result.data || {};
          }
        });
      },
      onUpdate: function() {
        $.post(dataPrefix + '/profile/update',
          {appId: appId, _csrf: $('#_csrf').val(), id: vue.profile._id, guide: vue.profile.guide, isHtml: vue.profile.isHtml },
          function(result) {
            if (result.error) {
              vue.errorMsg = result.error
            } else {
              vue.successMsg = result.message;
            }
        })
      }
    }
  });

  vue.fetchProfile();
</script>
